<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <title>SAPI-API列表</title>
    <meta charset="utf-8">
    <link href="../sapistatic?s=/image/favicon.ico" rel="shortcut icon"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../sapistatic?s=/css/sapi.css">
    <script src="../sapistatic?s=/js/jquery.min.js&v=2.1.1"></script>
    <script src="../sapistatic?s=/js/jquery.min.js&v=2.1.1"></script>
    <script src="../sapistatic?s=/js/bootstrap.min.js&v=3.3.7"></script>
    <script src="../sapistatic?s=/js/vue.min.js&v=2.2.2"></script>
    <script src="../sapistatic?s=/js/vue-resource.min.js&v=1.5.1"></script>
    <script src="../sapistatic?s=/js/DataFormater.js"></script>
</head>
<body>
​<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand " href="#"><span class="glyphicon glyphicon-leaf"></span>SAPI</a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li ><a href="../sapi">API分组</a></li>
                <li class="active"><a href="#">API列表</a></li>
                <li><a href="../faq"><span class="glyphicon glyphicon-question-sign"></span></a></li>
            </ul>
        </div>
    </div>
</nav>


<div  class="container" style="padding-top: 55px;min-height: 400px;">


    <div id="apiList" class="row" v-cloak>
        <div class="jumbotron" v-for="data in apiList">
            <div style="margin-bottom: 12px">
                <div>接口URL： {{data.url}}</div>
                <div class="btn-group pull-right">
                    <button type="button" class="btn btn-success" v-on:click="openDebug(data)" data-toggle="modal" data-target="#debugModal">
                        <span class="glyphicon glyphicon-play"></span>
                    </button>
                </div>
            </div>

            <span >
                <div>请求类型：{{data.requestType}}</div>
            </span>

            <div class="table-responsive">
            <table class="table table-bordered">
            <caption>接口参数：</caption>
            <thead>
            <tr>
                <th style="width:50%">参数</th>
                <th style="width:50%">类型</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="field in data.fieldList">
                <td>{{field.name}}</td>
                <td>{{field.type}}</td>
            </tr>
            <tr v-if="data.fieldList.length<=0">
                <td colspan="2" class="text-center">该接口未定义参数</td>
            </tr>

            </tbody>
        </table>
            </div>
        </div>
        <nav>
            <ul class="pager">
                <li><span v-on:click="jumpPage(-1)" class="glyphicon glyphicon-chevron-left"></span></li>
                <li>{{currentPage}}/{{totalPage}}</li>
                <li><span v-on:click="jumpPage(1)" class="glyphicon glyphicon-chevron-right"></span></li>
            </ul>
        </nav>

    </div>


    <!-- 模态框（Modal） -->
    <div class="modal fade" id="debugModal" v-cloak tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
        <div class="modal-dialog" style="width:65%;">
            <form id="modal-form"  enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header" style="padding: 10px">
                    <button type="reset" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="close">
                        <span class="glyphicon glyphicon-remove-circle"></span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">API</h4>
                </div>
                <div class="modal-body" style="padding: 5px">
                    <div class="input-group">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default">{{requestType}}</button>
                            <button type="button" class="btn btn-default dropdown-toggle"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only"></span></button>
                            <ul class="dropdown-menu">
                                <li v-for="requestType in requestTypeArray">
                                    <a v-on:click="reqType(requestType)">{{requestType}}   </a>
                                </li>
                            </ul>
                        </div><!-- /btn-group -->

                        <input type="text" class="form-control" placeholder="请输入 URL" v-model="curl">
                        <span class="input-group-btn">
                            <button class="btn btn-primary" type="button" v-on:click="doDebug(debugData)">Send</button>
                        </span>
                    </div><!-- /input-group -->
                    <br>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th style="width:25%">参数</th>
                            <th style="width:50%">值</th>
                            <th style="width:25%">数据类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="field in debugData.fieldList">
                            <td>{{field.name}}</td>
                            <td v-if="field.type!='MultipartFile'"><input type="text" class="form-control input-sm input-md" v-model="field.value" placeholder="数据值"></td>
                            <td v-else><input type="file" :name="field.name" ref="field.name" class="form-control input-sm input-md" v-model="field.value" @change="changeFile(field,$event)" ></td>
                            <td>{{field.type}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="btn-group" role="group" aria-label="...">
                        <button type="button" class="btn btn-default" v-on:click="changeDataStyle('JSON')" :class="{'active':jsonActive===true}">JSON</button>
                        <button type="button" class="btn btn-default" v-on:click="changeDataStyle('XML')" :class="{'active':xmlActive===true}">XML</button>
                    </div>
                        <pre id="returnData" class='CodeContainer codeData'>
                        </pre>
                    <span class="label label-success" v-if="resultMsg=='200'"><span class="glyphicon glyphicon-ok-circle"></span>Status: {{resultMsg}} OK</span>
                    <span class="label label-primary" v-else-if="resultMsg=='0'"><span class="glyphicon glyphicon-ok-circle"></span></span>
                    <span class="label label-warning" v-else-if="resultMsg!='200'||resultMsg!='0'"><span class="glyphicon glyphicon-exclamation-sign"></span>Status: {{resultMsg}} Error: {{requestErr}}</span>

                </div>

            </div><!-- /.modal-content -->
            </form>
        </div><!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>

<footer class="footer" style="border-top: 1px solid #CCCCCC">
    <div class="container text-center ">
        <br>
        <span>SAPI is a simple api starter for spring</span>
        <h6> SAPI V1.2 ©️ xiaour</h6>
    </div>
</footer>
</body>
<script type="text/javascript">
    $(function(){


        vm = new Vue({
            el:'#apiList',
            data:{apiList : [],
                currentPage:1,
                totalPage:1
            },mounted:function () {
                this.getmc(1);
            },

            methods: {
                openDebug: function (data) {
                    var url = window.location.href;
                    vm2.curl=url.split("/sapi")[0]+data.url;
                    vm2.debugData=copy(data);
                    for(var i=0;i<vm2.debugData.fieldList.length;i++){
                       data.fieldList[i].value="";
                    }
                    vm2.returnData="";
                    vm2.reqHeaders=[{name:null,value:null}];
                    vm2.requestTypeArray=data.requestType.split(",");
                    vm2.requestType=vm2.requestTypeArray[0];
                },
                jumpPage:function(condition){
                    vm.currentPage=vm.currentPage+condition;
                    console.log(vm.currentPage)
                    if(vm.currentPage==0){
                        vm.currentPage=vm.currentPage+1;
                        alert("已经是第一页了！");
                        return;
                    }
                    if(vm.currentPage>vm.totalPage){
                        alert("已经是最后一页了！");
                        vm.currentPage=vm.currentPage-1;
                        return;
                    }
                    this.getmc(vm.currentPage);

                },getmc:function (page){
                    var url="../sapidata/apiList";
                    if(page!=null){
                        url+="?pageNum="+page
                    }
                    this.$http.get(url).then(function(res) {
                            vm.apiList = res.data.apiList;
                            vm.totalPage = res.data.totalPage>0?res.data.totalPage:1;
                        },
                        function (err){
                            console.log(err);
                        } );

                }
            }
        });

        vm2 = new Vue({
            el:'#debugModal',
            data:{debugData:"",
                requestTypeArray:[],
                requestType:"",
                returnData:"",
                reqHeaders:[],
                curl:"",
                resultMsg:"0",
                formData:new FormData(),
                jsonActive:false,
                xmlActive:false,
                requestErr:""
            },
            methods: {

                changeDataStyle:function(style){
                if(style=="XML"){
                    try {
                        if(isXML(vm2.returnData)) {
                            formatXML("returnData", vm2.returnData);
                            vm2.xmlActive = true;
                            vm2.jsonActive = false;
                        }else{
                            document.getElementById("returnData").innerHTML =vm2.returnData;
                        }
                    }catch (err){
                        try {
                            Process("returnData", vm2.returnData);
                            vm2.xmlActive = false;
                            vm2.jsonActive = true;
                        }catch (err2){
                            document.getElementById("returnData").innerHTML =vm2.returnData;
                        }
                    }

                }
                if(style=="JSON"){
                    try {
                        Process("returnData", vm2.returnData);
                        vm2.xmlActive=false;
                        vm2.jsonActive=true;
                    }catch (err){
                        if(isXML(vm2.returnData)) {
                            formatXML("returnData",vm2.returnData);
                            vm2.xmlActive=true;
                            vm2.jsonActive=false;
                        }else{
                            document.getElementById("returnData").innerHTML =vm2.returnData;
                        }
                    }
                }

            }, doDebug: function (data) {
                    vm2.requestErr="";
                    vm2.returnData = "Requesting...";
                    var requestUrl=vm2.curl;
                    if(vm2.requestType==""){
                        vm2.requestType==vm2.requestTypeArray[0];
                    }

                    //处理路径参数
                    for(var i=0;i<data.fieldList.length;i++){
                        if(data.fieldList[i].isPath){
                            var param="{"+(data.fieldList[i].name)+"}";
                            requestUrl=requestUrl.replace(param,data.fieldList[i].value);
                        }
                    }

                    if(vm2.requestType=="GET"){
                        var tempUrl="";
                        for(var i=0;i<data.fieldList.length;i++){
                            if (data.fieldList[i].type != "MultipartFile" && data.fieldList[i].value != undefined&&!data.fieldList[i].isPath) {
                                tempUrl = tempUrl + data.fieldList[i].name + "=" + data.fieldList[i].value + "&";
                            }
                        }

                        this.$http.get(requestUrl+"?"+tempUrl,vm2.reqHeaders)
                            .then(function (res) {
                                    vm2.returnData=res.bodyText;
                                    vm2.resultMsg="200"
                                    vm2.changeDataStyle("JSON");
                                },
                                function (err){
                                    vm2.returnData=err.body.message;
                                    vm2.resultMsg=err.body.status;
                                    vm2.requestErr=err.body.error;
                                    vm2.changeDataStyle("JSON");
                                } );
                    }

                    if(vm2.requestType=="POST"||vm2.requestType=="PUT"){

                        for(var i=0;i<data.fieldList.length;i++){
                            if(data.fieldList[i].type!="MultipartFile"&&data.fieldList[i].value!=undefined&&!data.fieldList[i].isPath){
                                vm2.formData.delete(data.fieldList[i].name);
                                vm2.formData.append(data.fieldList[i].name, data.fieldList[i].value);
                            }
                        }

                        this.$http.post(requestUrl,vm2.formData,vm2.reqHeaders)
                            .then(function (res) {
                                    vm2.returnData=res.bodyText;
                                    vm2.resultMsg="200"
                                    vm2.changeDataStyle("JSON");
                                },
                                function (err){
                                    vm2.returnData=err.body.message;
                                    vm2.resultMsg=err.body.status;
                                    vm2.requestErr=err.body.error;
                                    vm2.changeDataStyle("JSON");
                                } );

                    }

                    if(vm2.requestType=="DELETE"){
                        for(var i=0;i<data.fieldList.length;i++){
                            if(data.fieldList[i].type!="MultipartFile"&&data.fieldList[i].value!=undefined&&!data.fieldList[i].isPath){
                                vm2.formData.delete(data.fieldList[i].name);
                                vm2.formData.append(data.fieldList[i].name, data.fieldList[i].value);
                            }
                        }

                        this.$http.delete(requestUrl,vm2.formData,vm2.reqHeaders)
                            .then(function (res) {
                                    vm2.returnData=res.bodyText;
                                    vm2.resultMsg="200"
                                    vm2.changeDataStyle("JSON");
                                },
                                function (err){
                                    vm2.returnData=err.body.message;
                                    vm2.resultMsg=err.body.status;
                                    vm2.requestErr=err.body.error;
                                    vm2.changeDataStyle("JSON");
                                } );

                    }
                    if(vm2.requestType=="PATCH"){
                        for(var i=0;i<data.fieldList.length;i++){
                            if(data.fieldList[i].type!="MultipartFile"&&data.fieldList[i].value!=undefined&&!data.fieldList[i].isPath){
                                vm2.formData.delete(data.fieldList[i].name);
                                vm2.formData.append(data.fieldList[i].name, data.fieldList[i].value);
                            }
                        }

                        this.$http.patch(requestUrl,vm2.formData,vm2.reqHeaders)
                            .then(function (res) {
                                    vm2.returnData=res.bodyText;
                                    vm2.resultMsg="200"
                                    vm2.changeDataStyle("JSON");
                                },
                                function (err){
                                    vm2.returnData=err.body.message;
                                    vm2.resultMsg=err.body.status;
                                    vm2.requestErr=err.body.error;
                                    vm2.changeDataStyle("JSON");
                                } );

                    }
                },
                reqType:function (type) {
                    vm2.requestType=type;
                },
                addHeaders:function (data) {
                    var header=vm2.reqHeaders;
                    var flag=1;
                    for(var i=0;i<header.length;i++){
                        if(header[i].name==undefined||header[i].name=="") {
                            flag=2
                        }
                    }
                    //如果Key都有值，则添加一行新的
                    if(flag==1){
                        vm2.reqHeaders.push({name:null,value:null});
                    }

                },close:function () {
                    vm2.debugData="";
                    vm2.returnData="";
                    vm2.resultMsg="0";
                    vm2.requestErr="";
                    $("#returnData").empty();
                },
                changeFile:function(data,event){
                    vm2.formData.delete(data.name);
                    var deviceFile = event.target.files;
                    for(var i=0;i<deviceFile.length;i++){
                        vm2.formData.append(data.name, deviceFile[i]);
                    }
                }

            }
        });

    });


</script>
</html>
